<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端用户名校验(GET方式)</title>
</head>
<body>
    <h2>ajax之用户名校验</h2>
    <p>
        用户名：
        <input type="text" id="username">
    </p>
    <p>
        手机号：
        <input type="text" id="usertel">
    </p>

    <script type="text/javascript">
        document.getElementById("username").onblur = function(){
            //ajax方式用户名校验
            //1、获取用户名信息
            var nm = document.getElementById('username').value;

            //对传递的符号进行编码处理
            nm = encodeURIComponent(nm);

            //2、ajax校验
            var xhr = new XMLHttpRequest();

            //ajax事件设置，以便接受返回的消息
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    alert(xhr.responseText);
                }
            }

            xhr.open('get', '08ServerFor06.php?name='+nm);
            xhr.send(null);
        }
    </script>
</body>
</html>